<!--
* @Author: 张昊
* @Date:  2022-11-24 15:19:21
* @FilePath: /pages/class/coupon/coupon.vue
* @Description: 我的优惠券
-->
<template>
	<view class="coupon">
		<!-- 我的优惠券 -->
		<u-tabs
			:list="ReachBottom"
			activeColor="#"
			bar-width="50"
			:is-scroll="false"
			:current="showView"
			@change="clickTabs"
			:activeStyle="{
				color: '#0301c5',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}"
			:inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}"
			itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:33.33vw;backgroundColor:#ffffff"
		></u-tabs>
		<!-- 全部 -->
		<template v-if="showView === 0">
			<view class="content" v-for="item in ReachBottom[0].uniqueDetailsItems" :key="item.id">
				<template v-if="comShow(item)">
					<view class="left">
						<view class="money">
							{{ item.coupon.result_data.number }}
							<text class="small">{{ item.coupon.result === 1 ? '元' : '折' }}</text>
						</view>
						<view class="block">
							<view class="title">{{ item.coupon.name }}</view>
							<view class="texts">
								<view class="text">订单满{{ item.coupon.result_data.money }}元减{{ item.coupon.result_data.number }}元</view>

								<view v-if="newTime < item.coupon.endtime" class="text">领取后{{ item.coupon && $u.timeFormat(item.coupon.endtime, 'yyyy-mm-dd') }}内有效</view>
								<view class="text" v-else>已失效</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="butoon">
							<u-button v-if="newTime < item.coupon.endtime" @click="clickUse(item)" type="primary" color="#0301c5" size="mini" text="立即使用"></u-button>
							<u-button v-else disabled type="error" color="#0301c5" size="mini" text="无法使用"></u-button>
						</view>
					</view>
				</template>
			</view>
		</template>
		<!-- 未使用 -->
		<template v-if="showView === 1">
			<view class="content" v-for="item in ReachBottom[1].uniqueDetailsItems" :key="item.id">
				<template v-if="comShow(item)">
					<view class="left">
						<view class="money">
							{{ item.coupon.result_data.number }}
							<text class="small">{{ item.coupon.result === 1 ? '元' : '折' }}</text>
						</view>
						<view class="block">
							<view class="title">{{ item.coupon.name }}</view>
							<view class="texts">
								<view class="text">订单满{{ item.coupon.result_data.money }}元减{{ item.coupon.result_data.number }}元</view>

								<view v-if="newTime < item.coupon.endtime" class="text">领取后{{ item.coupon && $u.timeFormat(item.coupon.endtime, 'yyyy-mm-dd') }}内有效</view>
								<view class="text" v-else>已失效</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="butoon">
							<u-button v-if="newTime < item.coupon.endtime" @click="clickUse(item)" type="primary" color="#0301c5" size="mini" text="立即使用"></u-button>
							<u-button v-else disabled type="error" color="#0301c5" size="mini" text="无法使用"></u-button>
						</view>
					</view>
				</template>
			</view>
		</template>
		<!-- 已使用 -->
		<template v-if="showView === 2">
			<view class="content" v-for="item in ReachBottom[2].uniqueDetailsItems" :key="item.id">
				<template v-if="comShow(item)">
					<view class="left">
						<view class="money">
							{{ item.coupon.result_data.number }}
							<text class="small">{{ item.coupon.result === 1 ? '元' : '折' }}</text>
						</view>
						<view class="block">
							<view class="title">{{ item.coupon.name }}</view>
							<view class="texts">
								<view class="text">订单满{{ item.coupon.result_data.money }}元减{{ item.coupon.result_data.number }}元</view>

								<view v-if="newTime < item.coupon.endtime" class="text">领取后{{ item.coupon && $u.timeFormat(item.coupon.endtime, 'yyyy-mm-dd') }}内有效</view>
								<view class="text" v-else>已失效</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="butoon">
							<u-button v-if="newTime < item.coupon.endtime" @click="clickUse(item)" type="primary" color="#0301c5" size="mini" text="立即使用"></u-button>
							<u-button v-else disabled type="error" color="#0301c5" size="mini" text="无法使用"></u-button>
						</view>
					</view>
				</template>
			</view>
		</template>
		<!-- 下拉刷新组件 -->
		<txt-pulldown :flagIn="ReachBottom[showView].flagPull"></txt-pulldown>
	</view>
</template>

<script>
import {
	myCoupon // 优惠券
} from '@/common/api.js';
import onReachBottoms from '@/common/mixin/onReachBottoms.js';
export default {
	mixins: [onReachBottoms],
	data() {
		return {
			// 优惠券
			myCouponData: [],
			myCouponData1: [],
			myCouponData2: [],
			list: [
				{
					name: '全部',
					value: 0
				},
				{
					name: '未使用',
					value: 1
				},
				{
					name: '已使用',
					value: 2
				}
			],
			// 本页面将会运用独立的下拉刷新体
			ReachBottom: [
				// 水表管理
				{
					name: '全部',
					// 页码
					num: 1,
					// 下拉标志
					flagPull: true,
					// 总页数
					total: 0,
					uniqueDetailsItems: [],
					code: null,
					params: null
				},
				// 电表管理
				{
					name: '未使用',
					// 页码
					num: 1,
					// 下拉标志
					flagPull: true,
					// 总页数
					total: 0,
					uniqueDetailsItems: [],
					code: null,
					params: null
				},
				// 水表抄表
				{
					name: '已使用',
					// 页码
					num: 1,
					// 下拉标志
					flagPull: true,
					// 总页数
					total: 0,
					uniqueDetailsItems: [],
					code: null,
					params: null
				}
			],
			// 限制显示优惠券
			comPrice: 99999,
			newTime: new Date()
		};
	},
	computed: {
		comShow() {
			return item => {
				console.log('展示', item);
				if (this.comPrice === 99999) {
					return true;
				} else {
					// 对比金额
					let bool = Number(item.coupon.result_data.money) <= Number(this.comPrice);
					if (bool) {
						// 对比时间
						if (newTime < item.coupon.endtime) {
							return true;
						} else {
							return false;
						}
					} else {
						return false;
					}
				}
			};
		}
	},
	methods: {
		// 导航栏改变
		// change(e) {
		// 	this.current = e.index;
		// },
		clickUse(item) {
			console.log('优惠券id', item.id);
			this.$store.commit('$coupon', item);
			uni.navigateBack({
				delta: 1
			});
		},
		async reqPaging1() {
			// 全部
			let { data, total } = await myCoupon({ params: { is_used: 0, limit: 10, page: this.ReachBottom[0].num } });
			this.ReachBottom[0].uniqueDetailsItems = [...this.ReachBottom[0].uniqueDetailsItems,...data];
			this.ReachBottom[0].total = total;
			this.ReachBottom[0].flagPull = this.UsePullDown(this.ReachBottom[0].uniqueDetailsItems, this.ReachBottom[0].total);
		},
		async reqPaging2() {
			// 全部
			let { data, total } = await myCoupon({ params: { is_used: 1, limit: 10, page: this.ReachBottom[1].num } });
			this.ReachBottom[1].uniqueDetailsItems = [...this.ReachBottom[1].uniqueDetailsItems,...data];
			this.ReachBottom[1].total = total;
			this.ReachBottom[1].flagPull = this.UsePullDown(this.ReachBottom[1].uniqueDetailsItems, this.ReachBottom[1].total);
		},
		async reqPaging3() {
			// 全部
			let { data, total } = await myCoupon({ params: { is_used: 2, limit: 10, page: this.ReachBottom[2].num } });
			this.ReachBottom[2].uniqueDetailsItems = [...this.ReachBottom[2].uniqueDetailsItems,...data];
			this.ReachBottom[2].total = total;
			this.ReachBottom[2].flagPull = this.UsePullDown(this.ReachBottom[2].uniqueDetailsItems, this.ReachBottom[2].total);
		}
	},
	onLoad(params) {
		if (params.comPrice) {
			this.comPrice = params.comPrice;
			console.log('11', params.comPrice);
		}
	},

	async onShow() {
		// 显示上限价格
		this.comPrice = 99999;
	}
};
</script>
<style>
page {
	background: #f4f6f8;
}
</style>
<style lang="scss" scoped>
page {
	background-color: #ccc;
}

.content {
	background-color: #ffffff;
	margin: 28rpx;
	display: flex;

	.left {
		flex: 1;
		border-right: 1px dashed #ddd;
		padding: 30rpx;
		display: flex;
		align-items: center;
		.money {
			margin-right: 28rpx;
			color: #e74c3c;
			.small {
				font-size: 15rpx;
			}
		}
		.title {
			font-size: 30rpx;
			font-weight: 600;
			margin: 8rpx 0;
		}
		.text {
			font-size: 24rpx;
			color: #9f9f9f;
		}
	}
	.right {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.butoon {
			width: 120rpx;
			height: 50rpx;
		}
	}
}
</style>
